import React from 'react';
import { CirclePacking } from '@ant-design/plots';

const DemoCirclePacking = ({ data }) => {
  const fill = Array(10)
    .fill(0)
    .map(() => {
      return {
        name: '',
        value: 30 * Math.random(),
      };
    });
  data.children.push(...fill);
  const config = {
    autoFit: true,
    padding: 0,
    data,
    color: '#ffffff-#722ED1-#2F54EB-#DC57A7',
    legend: false,
    label: {
      formatter: ({ name, value }) => {
        return name !== 'root' && name !== '' ? `${name}\n${value}` : '';
      },
      offsetY: 8,
      style: {
        fontSize: 12,
        textAlign: 'center',
        fill: 'white',
      },
    },
    height: 550,
    width: 550,
    hierarchyConfig: {
      padding: 0.025,
    },
    tooltip: false,
  };

  return <CirclePacking {...config} style={{ marginBottom: '30px' }} />;
};

export default DemoCirclePacking;
